<template>
  <view class="register-container">
    <view class="title">用户注册</view>
    <view class="User">
      <input v-model="User.username" placeholder="用户名" class="input" />
      <input v-model="User.password" placeholder="密码" type="password" class="input" />
      <input v-model="User.realName" placeholder="真实姓名" class="input" />
      <picker :range="genderOptions" @change="onGenderChange">
        <view class="picker">
          性别：{{ genderOptions[User.gender] || '请选择' }}
        </view>
      </picker>
      <input v-model="User.phone" placeholder="手机号" class="input" />
      <input v-model="User.email" placeholder="邮箱" class="input" />
      <input v-model="User.avatar" placeholder="头像地址" class="input" />
      <button class="register-btn" @click="onRegister">注册</button>
    </view>
    <view v-if="msg" class="msg">{{ msg }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const User = ref({
  username: '',
  password: '',
  realName: '',
  gender: null,
  phone: '',
  email: '',
  avatar: ''
})

const genderOptions = ['男', '女']

const msg = ref('')

function onGenderChange(e) {
  User.value.gender = e.detail.value+1
}

function validate() {
  // 用户名校验：2~18位，不能有特殊字符（只允许字母、数字、下划线、中文）
  const usernameReg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,18}$/;
  if (!usernameReg.test(User.value.username)) {
    uni.showToast({ title: '用户名格式错误', icon: 'none' });
    return false;
  }
  // 密码校验：6~18位
  if (!User.value.password || User.value.password.length < 6 || User.value.password.length > 18) {
    uni.showToast({ title: '密码需6~18位', icon: 'none' });
    return false;
  }
  // 手机号校验（中国大陆手机号）
  const phoneReg = /^1[3-9]\d{9}$/;
  if (!phoneReg.test(User.value.phone)) {
    uni.showToast({ title: '手机号格式错误', icon: 'none' });
    return false;
  }
  // 邮箱校验
  const emailReg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
  if (!emailReg.test(User.value.email)) {
    uni.showToast({ title: '邮箱格式错误', icon: 'none' });
    return false;
  }
  return true;
}

function onRegister() {
  if (!validate()) return; // 校验不通过直接返回

  uni.request({
    url: '/api/user/registered',
    method: 'POST',
    data: {
      username: User.value.username,
      password: User.value.password,
      realName: User.value.realName,
      gender: User.value.gender,
      phone: User.value.phone,
      email: User.value.email,
    },
    success: (res) => {
      if (res.data.code == 0) {
        uni.showToast({
          title: '注册成功，正在跳转登录界面',
          icon: 'success',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateTo({ url: '/pages/login/login' });
        }, 2000);
      } else {
        msg.value = res.data.message || '注册失败';
      }
    },
    fail: () => {
      msg.value = '注册失败';
    }
  })
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: #f7f7f7;
  padding: 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.User {
  width: 100%;
  max-width: 500rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.input {
  height: 48rpx;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
  font-size: 28rpx;
  padding: 0 16rpx;
  background: #f4f4f4;
}
.picker {
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
  font-size: 28rpx;
  padding: 0 16rpx;
  background: #f4f4f4;
  color: #666;
}
.register-btn {
  height: 54rpx;
  background: #2B9939;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 30rpx;
  margin-top: 18rpx;
}
.msg {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #e53935;
}
</style>